<!-- Created by jack on 2022/4/2 - 14:50 -->
<style scoped lang="less">
.user-box{
  width: 100%;
  height: 60px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  &__avatar{
    height: 100%;
    border-radius: 50%;
  }
  &__label{
    font-size: 14px;
    margin-left: 8px;
    color: #727272;
  }
}
</style>

<template>
  <div class="user-box" v-if="!isLogin" @click="clickUserInfo">
    <img src="https://s6.bihukankan.com/img/1641630104default-avatar.svg" class="user-box__avatar">
    <text class="user-box__label">未登录</text>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue"

const props = defineProps({
  userInfo:{ type:Object,default: () => ({}) }, // 用户信息
})
// 用户信息
const userInfo = ref(null)

const isLogin = computed(_ => props.userInfo.length ) // 登录状态

/** 点击用户 */
const clickUserInfo = () => {
  if(!isLogin.value) return false
}
</script>
